html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html,
body {
    height: 100%;
    width: 100%;
    font-family: Arial, PingFang-SC-Regular, 'Microsoft YaHei', 'simsun',
        'Helvetica Neue', Helvetica;
    overflow-x: hidden;
    font-size: 1rem;
    background-color: #105B49;
    overflow: auto;
}

html,
body,
div,
p,
button {
    padding: 0;
    margin: 0;
}

button {
    outline: none;
    border: none;
    font-size: inherit;

}

.order_info {
    background-color: #1B604F;
    color: #C0D1CD;
    font-size: 0.875rem;
    padding: 30vw 0 5vw;
}

.order_info p {
    margin-bottom: 5vw;
}

.order_info .title {
    height: 6vw;
    background: url("../payimg/order_info_text.png") no-repeat center center /50vw 6vw;
}

.product_name,
.order_player,
.order_money {
    padding-left: 32vw;
}

.product_name span {

    font-family: Source Han Sans CN;
    background: url("../payimg/masonry_icon.png") no-repeat left center/5.6vw 5vw;
    padding: 2px 0 2px 7.2vw;
}

.order_money span {
    color: #F9C95D;
}

.btns {
    display: flex;
    justify-content: center;
    padding: 7.2vw 0 8vw;
}

.btns .button {
    width: 34.4vw;
    height: 12.4vw;
    font-size: 1.25rem;
}

.btns .button.back {
    color: #176D4B;
    background: url('../payimg/back_btn.png') no-repeat center center / cover;
    margin-right: 8vw;
}

.btns .button.pay {
    color: #954827;
    background: url('../payimg/pay_btn.png') no-repeat center center / cover;
}

.order_warn {
    font-size: 0.875rem;
    color: #72948C;
    padding: 0 12vw;
}
.order_warn p{
    margin-bottom: 1vw;
}
.order_warn p.title{
    margin-bottom: 2vw;
}
/* 响应式布局 */
@media screen and (max-width: 304px) {
    html {
        font-size: 0.75rem;
    }
}

@media screen and(min-width: 305px) and (max-width: 328px) {
    html {
        font-size: 0.8125rem;
    }
}

@media screen and(min-width: 329px) and (max-width: 351px) {
    html {
        font-size: 0.875rem;
    }
}

@media screen and(min-width: 352px) and (max-width: 374px) {
    html {
        font-size: 0.9375rem;
    }
}

@media screen and(min-width: 375px) and (max-width: 398px) {
    html {
        font-size: 1rem;
    }
}

@media screen and(min-width: 399px) and (max-width: 421px) {
    html {
        font-size: 1.0625rem;
    }
}

@media screen and(min-width: 422px) and (max-width: 445px) {
    html {
        font-size: 1.125rem;
    }
}

@media screen and(min-width: 446px) and (max-width: 468px) {
    html {
        font-size: 1.1875rem;
    }
}

@media screen and(min-width: 469px) and (max-width: 492px) {
    html {
        font-size: 1.25rem;
    }
}

@media screen and(min-width: 493px) and (max-width: 515px) {
    html {
        font-size: 1.3125rem;
    }
}

@media screen and(min-width: 516px) and (max-width: 539px) {
    html {
        font-size: 1.375rem;
    }
}

@media screen and(min-width: 540px) and (max-width: 562px) {
    html {
        font-size: 1.4375rem;
    }
}

@media screen and(min-width: 562px) and (max-width: 585px) {
    html {
        font-size: 1.5rem;
    }
}

@media screen and(min-width: 586px) and (max-width: 609px) {
    html {
        font-size: 1.5625rem;
    }
}

@media screen and(min-width: 610px) and (max-width: 632px) {
    html {
        font-size: 1.625rem;
    }
}

@media screen and(min-width: 633px) and (max-width: 656px) {
    html {
        font-size: 1.6875rem;
    }
}

@media screen and(min-width: 657px) {
    html {
        font-size: 1.75rem;
    }
}